<template>
<div class="app-container">
<el-card shadow="never" class="panel">
<div slot="header" class="panel__header"><i class="el-icon-key panel__icon"></i><div class="panel__title">访问控制规则</div></div>


<el-form :inline="true" :model="q" class="mb12">
<el-form-item label="资源类型"><el-select v-model="q.resource_type" clearable><el-option label="文件" value="file"/><el-option label="设备" value="device"/></el-select></el-form-item>
<el-form-item label="动作"><el-select v-model="q.action" clearable><el-option label="读" value="read"/><el-option label="写" value="write"/></el-select></el-form-item>
<el-form-item><el-button type="primary" icon="el-icon-search" @click="fetch">查询</el-button></el-form-item>
</el-form>


<el-table :data="list" v-loading="loading" border stripe>
<el-table-column type="index" width="60"/>
<el-table-column prop="resource_type" label="资源类型" width="120"/>
<el-table-column prop="resource_id" label="资源ID" width="120"/>
<el-table-column prop="action" label="动作" width="80"/>
<el-table-column prop="effect" label="效果" width="100"/>
<el-table-column prop="subject" label="主体" min-width="200"/>
<el-table-column prop="description" label="说明" min-width="200"/>
<el-table-column label="操作" width="120">
<template slot-scope="s"><el-button type="text" @click="remove(s.row)">删除</el-button></template>
</el-table-column>
</el-table>


<div class="pager"><el-pagination background layout="prev, pager, next, ->, total" :total="total" :page-size="q.pageSize" :current-page.sync="q.pageNum" @current-change="fetch"/></div>
</el-card>
</div>
</template>


<script>
import request from '@/utils/request'
export default { name:'AccessControl', data(){ return{ q:{ pageNum:1,pageSize:10, resource_type:'', action:'' }, list:[], total:0, loading:false } }, methods:{ async fetch(){ this.loading=true; try{ const res= await request({ url:'/access/rule/page', method:'get', params:this.q }); this.list=res.rows||[]; this.total=res.total||0 }finally{ this.loading=false } }, async remove(r){ await request({ url:'/access/rule/delete', method:'post', data:{ id:r.id } }); this.$message.success('删除成功'); this.fetch() } }, mounted(){ this.fetch() } }
</script>


<style scoped>
.panel{ border:1px solid #ebeef5 }
.panel__header{ display:flex; align-items:center; gap:8px }
.panel__icon{ color:#5d86ff }
.mb12{ margin-bottom:12px }
.pager{ margin-top:12px; text-align:right }
</style>